<template>
	<div>
		<!-- 头部 -->

		<Head class="head" :data="searchList"></Head>
		<!-- 中间 -->
		<div id="main">
			<div class="container">
				<div id="cart">
					<div class="title">
						<div class="goodsNum">{{$t('shoppingCar.AllGoods')}}</div>
						<div>
							<!--							<strong class = "">配送至</strong>-->
							<!--							<span class = "address">陕西省西安市莲湖区 <i class = "el-icon-arrow-down"></i> </span>-->
						</div>
					</div>
					<form action="#" method="post">
						<table class="form">
							<thead>
								<tr>
									<th width="4%"></th>
									<th width="44%">{{$t('shoppingCar.goods')}}</th>
									<th width="13%">{{$t('placeOrder.unitPrice')}}{{ '('+$t('placeOrder.yuan')+')' }}</th>
									<th width="15%">{{$t('goodsDet.quantity')}}</th>
									<th width="14%">{{$t('placeOrder.money')}}</th>
									<th width="10%">{{$t('shoppingCar.operate')}}</th>
								</tr>
							</thead>
							<tbody id="cart-goods-list">
								<tr v-for="(item, index) in productList">
									<td>
										<input type="checkbox" name="good-id" :value="1" v-model="item.select"
											class="xuanze" id="xuanze">
									</td>
									<td class="goods">
										<div class="goods-image">
											<img :src="item.goods.coverImg">
										</div>
										<div class="goods-information">
											<h4>{{ item.goods.title }}</h4>
											<div>{{$t('placeOrder.specifications')}}:{{ item.sku ? item.sku.detailJson : '' }}</div>
										</div>
									</td>
									<td>
										<strong v-if="relationId != 'null'" class="price">{{ DollarSignValue }}<em class="price-em">{{
											getProportion(item.goods.memberPrice)
												}}</em></strong>
										<strong v-if="relationId == 'null'" class="price">{{ DollarSignValue }}<em class="price-em">{{
											getProportion(item.goods.price)
												}}</em></strong>
									</td>
									<td>
										<div class="combo">
											<!--											<input type = "button" name = "minus" value = "-" class = "combo-minus"-->
											<!--												   @click = "item.number<2?item.number=1:item.number&#45;&#45;">-->
											<!--											<input type = "text" name = "count" v-model.number = "item.number" class = "combo-value">-->
											<!--											<input type = "button" name = "plus" value = "+" class = "combo-plus" @click = "item.number++">-->
											<el-input-number size="mini" v-model="item.number" :min="1" step-strictly>
											</el-input-number>
										</div>
									</td>
									<td>
										<strong v-if="relationId != 'null'" class="amount">{{ DollarSignValue }}<em class="amount-em">{{
											getProportion(item.goods.memberPrice * item.number)
												}}</em></strong>
										<strong v-if="relationId == 'null'" class="amount">{{ DollarSignValue }}<em class="amount-em">{{
											getProportion(item.goods.price * item.number)
												}}</em></strong>
									</td>
									<td>
										<div @click="orderDel(item)" class="del-btn">{{$t('shoppingCar.delete')}}</div>
									</td>
								</tr>
							</tbody>
							<tfoot v-show="productList.length != 0">
								<tr>
									<td colspan="3">
										<label>
											<input type="checkbox" name="all" v-model="isSelectAll">
											<span @click="">{{$t('shoppingCar.checkAll')}}</span>
										</label>
										<!--										<a href = "#" rel = "external nofollow" id = "cart-delete" @click = "del()">删除</a>-->
									</td>
									<td colspan="3">
										<span>{{$t('shoppingCar.total')}}：</span>
										<strong id="total-amount">{{ DollarSignValue }}<em id="total-amount-em">{{ getProportion(getTotal) }}</em></strong>
										<div @click="onsubmit()" id="settlement">{{$t('shoppingCar.Immediate')}}</div>
									</td>
								</tr>
							</tfoot>
						</table>
					</form>
					<el-empty v-if="productList.length === 0" :description="$t('shoppingCar.present')"></el-empty>
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<Foots></Foots>
	</div>
</template>

<script>
import Head from '@/components/head.vue'
import Foots from '@/components/foots.vue'
import { Loading } from "element-ui";
import { currency } from '../js/currency'
export default {
	components: {
		Head,
		Foots,
	},
	data() {
		return {
			page: 1,
			size: 100,
			userId: '',
			searchList: ['粽子', '防晒霜', '洗衣液', '蚊香液', '抽纸', '零食'],
			productList: [],
			relationId: window.localStorage.getItem('relationId'),	//邀请码
		}

	},
	computed: {
		getTotal: function () {
			var newArr = this.productList.filter(function (val) {
				return val.select === true;
			})
			var price = 0;
			if (this.relationId == 'null') {
				for (var i = 0; i < newArr.length; i++) {
					price += newArr[i].number * newArr[i].goods.price
				}
			} else {
				for (var i = 0; i < newArr.length; i++) {
					price += newArr[i].number * newArr[i].goods.memberPrice
				}
			}
			console.log()
			return price.toFixed(2)
		},
		isSelectAll: {
			get: function () {
				return this.productList.every(function (val) {
					return val.select === true;
				})
			},
			set: function (newValue) {
				for (var i = 0; i < this.productList.length; i++) {
					this.productList[i].select = newValue;
				}
			}
		},
		DollarSignValue() {
			// let dollar=this.$store.state.currencyInfo.figure
			let dollar = this.getDollarSign()
			return dollar
		}
	},
	mounted() {
		this.userId = this.$cookie.get('userId')
		this.dataSelect()
	},
	methods: {
		// 获取货币符号
		getDollarSign() {
			let dollar = this.$store.state.currencyInfo.figure
			return dollar
		},
		// 金额计算比例
		getProportion(money) {
			let proportion = this.$store.state.currencyInfo.scale
			let price = currency(proportion, money)
			return price
			// return money
		},
		// 获取数据
		dataSelect() {
			let loadingInstance = Loading.service({
				lock: true,
				text: '加载中……',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			this.$http({
				url: this.$http.adornUrl('/selfCart/list'),
				method: 'get',
				params: this.$http.adornParams({
					'page': this.page - 1,
					'size': this.size,
					'userId': this.userId
				})
			}).then(({ data }) => {
				this.productList = []
				this.$nextTick(() => {
					loadingInstance.close();
				})
				if (data && data.status == 0) {
					data.data.content.forEach(res => {
						res.select = true
						this.productList.push(res)
						// if(res.sku) {
						// 	this.productList.push(res)
						// }
					})
					// this.productList = data.data.content
				}
			})
		},
		orderDel(e) {
			this.$confirm('确认删除该商品, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$http({
					url: this.$http.adornUrl('selfCart/deleteAll?ids=' + e.id),
					method: 'get',
					params: this.$http.adornParams({})
				}).then(({ data }) => {
					if (data && data.status == 0) {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.dataSelect()
					}
				})
			});
		},
		onsubmit() {
			let state = false;
			let ids = ''
			let datas = []
			let youfei = 0;
			for (var i = 0; i < this.productList.length; i++) {
				if (this.productList[i].select == true) {
					state = true;
					youfei = youfei + parseFloat(this.productList[i].goods.postagePrice);
					if (ids == '') {
						ids = this.productList[i].id;
					} else {
						ids = ids + ',' + this.productList[i].id;
					}
					datas.push(this.productList[i]);
				} else {
					if (!state) {
						state = false;
					}
				}
			}
			if (state) {
				console.log(datas)
				window.localStorage.setItem('shopCartOrderList', JSON.stringify(datas))
				// this.$cookie.set('shopCartOrderList', datas.toString())
				this.$router.push({
					path: '/shopCartOrder?money=' + this.getTotal + '&ids=' + ids + '&youfei=' + youfei
				})
			} else {
				this.$message({
					type: 'error',
					message: '请选择商品!'
				});
			}
		}
	}
}
</script>

<style scoped>
.head {
	background: #fff;
}

.title {
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding-top: 10px;
}

.title .address {
	border: 1px solid #cccccc;
	border-radius: 2px;
	padding: 2px 6px;
}

.title .goodsNum {
	color: #EA7408;
	font-size: 18px;
	font-weight: 700;
}

#main {
	padding: 30px 0px;
	width: 1200px;
	margin: 0 auto;
	/* height: 100%; */
}

#cart {
	background: #FFFFFF;
	padding: 0 40px;
}

#cart h1 {
	line-height: 40px;
	padding: 0px 0px 10px 0px;
}

table.form {
	border-collapse: collapse;
	empty-cells: show;
	margin: 20px 0px;
	padding: 0px;
	table-layout: fixed;
	width: 100%;
}

/*table.form th,*/
table.form td {
	padding: 15px 10px;
	text-align: left;
}

input[type=checkbox]:checked {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #EA7408 !important;
	color: #EA7408 !important;
	width: 13px;
	height: 13px;
	/* border: 1px solid #ddd; */
	position: relative;
}

input[type=checkbox]::after {
	content: "✔";
	color: #fff;
	display: inline-block;
	font-size: 90%;
	width: 13px !important;
	height: 13px !important;
	/* font-size: 12px; */
	line-height: 10px;
	text-align: center;
	position: absolute;
	left: 1px;
	top: 2px;
}

/* input[type=checkbox]:checked {
	background-color: cadetblue !important;
} */

.container{
	min-height: calc( 1221px - 540px);
}
table.form th {
	text-align: left;
	padding: 5px 10px;
	background: #F6F5F7;
}

.goods {
	/*width: 100%;*/
}

.goods .goods-image img {
	border: 1px solid #DDDDDD;
	float: left;
	height: 100px;
	width: 100px;
	margin: 0px 20px 0px 0px;
}

.goods .goods-information {
	float: left;
	width: 280px;
}

.goods .goods-information h4 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.goods .goods-information div {
	color: #666666;
	font-size: 15px;
	line-height: 20px;
	margin: 10px 0px 0px 0px;
}

.price,
.amount,
#total-amount {
	/*color: #E00000;*/
}

#total-amount {
	font-size: 22px;
	/* color: #ff2d55; */
	color: #EA7408;
}

.price em,
.amount em,
#total-amount em {
	font-style: normal;
}

.combo .combo-minus,
.combo .combo-value,
.combo .combo-plus {
	background: #FFFFFF;
	border: 1px solid #DDDDDD;
	color: #333333;
	float: left;
	font-weight: bold;
	margin: 0px;
	outline: none;
	text-align: center;
}

.combo .combo-minus,
.combo .combo-plus {
	font-size: 16px;
	height: 26px;
	line-height: 26px;
	padding: 0px;
	width: 24px;
}

.combo .combo-value {
	border-left: none;
	border-right: none;
	height: 20px;
	line-height: 20px;
	padding: 2px;
	width: 40px;
}

#cart-delete {
	margin-left: 20px;
}

#settlement {
	/* background: #E00000; */
	background: #EA7408;
	border: none;
	color: #FFFFFF;
	float: right;
	font-size: 16px;
	height: 40px;
	line-height: 40px;
	margin: 0px;
	outline: none;
	padding: 0px;
	text-align: center;
	width: 160px;
	border-radius: 5px;
}

.del-btn {
	width: 70px;
	height: 28px;
	text-align: center;
	font-size: 14px;
	color: #333333;
	line-height: 28px;
	border: 1px solid #dddddd;
}
</style>
